<template>
  <div>
       <van-tabbar v-model="active" active-color="#ee0a24"  @change="onChange">
          <van-tabbar-item v-for="item in navList" :icon="item.icon" :key="item.name" @click="toTurn(item.path)">{{item.name}}</van-tabbar-item>  

      </van-tabbar>
  </div>
</template>

<script setup>
import {useRouter} from 'vue-router';
  import {ref,reactive,toRefs} from 'vue'
  let router=useRouter();
  let state=reactive({
      navList:[{
        icon:"home-o",
        name:"首页",
        path:"/home"
      },
        {
          icon:"search",
          name:"分类",
          path:"/cate"
            },
            {
              icon:"friends-o",
              name:"购物车",
              path:"/cart"
            },
            {
              icon:"setting-o",
              name:"个人中心",
              path:'/mine'
            }
        ],
        onChange(index){
          console.log(index)
        },
        active:0
      })
    // 语法糖中 像外部 使用reactive里的数据
    let {navList,onChange,active}=toRefs(state)
      // 跳转页面
    let toTurn=(url)=>{
      router.push(url)
    }


</script>
